<template>
  <div v-if="commonAttr.isTouchmove" class="wb-bg" ref="bg" :style="styles" @touchmove="onTouchMove" @touchend="onTouchEnd"></div>
  <div v-else class="wb-bg" ref="bg" :style="styles"></div>
</template>
<script>
import { EventBus } from '@/store/index'
import { utils } from '@/components/utils/utils'
import { bgPositionStyle, getPxOrVw } from '@/store/utils'
import { BG_POSITION_REPEAT_TYPES } from '@/common/const'

export default {
  mixins: [utils],
  setup () {
    return {
      BG_POSITION_REPEAT_TYPES: BG_POSITION_REPEAT_TYPES,
      touched: false,
    }
  },
  created() {
    if(this.item.commonAttr.groupInjectClassName){
      this.injectDomInCompData();
    }
  },
  computed:{
    styles(){
      let styles_ = _.cloneDeep(this.item.styles)
      let commonAttr = this.item.commonAttr
      let unit = getPxOrVw()
      if(commonAttr.isGradient){
        let str = '-webkit-linear-gradient(' + commonAttr.gradientDirection + ', '
        let gradientColors = commonAttr.gradientColors.split(',')
        let isPercent = commonAttr.gradientColors.indexOf('%') != -1
        let len = gradientColors.length
        let base = 1/len * 100

        _.forEach(gradientColors, (color, index) => {
          if(isPercent){
            str += color
          }else{
            str += color + ' ' + index * base + '%'
          }
          if(index != len - 1){
            str += ','
          }
        })
        str += ')'
        styles_.backgroundImage = str
      }
      if(this.item.commonAttr.bgUrl) {
        bgPositionStyle(styles_, this.item.commonAttr.bgPositionRepeatType)
        styles_.backgroundImage = 'url(' + this.item.commonAttr.bgUrl + ')'
      }
      if(this.item.commonAttr.maskUrl) {
        // styles_.mask = 'url(' + this.item.commonAttr.maskUrl + ')'
        styles_['-webkit-mask-image'] = 'url(' + this.item.commonAttr.maskUrl + ')';
        styles_['-webkit-mask-size'] = 'contain';
        styles_['-webkit-mask-position'] = 'center';
        styles_['-webkit-mask-repeat'] = 'no-repeat';
      }
      if(this.isH5Edit){
        styles_.width = 'inherit'
        styles_.height = 'inherit'
      }
      styles_.backgroundColor = this.item.styles.backgroundColor
      styles_.opacity = this.item.styles.opacity
      styles_.borderRadius = commonAttr.borderRadius + unit
      styles_.rotate = commonAttr.rotate
      if(this.item.commonAttr.height <= 4){
        styles_.borderBottom = commonAttr.borderSize + unit + ' ' + commonAttr.borderStyle + ' ' + commonAttr.borderColor
      }else{
        styles_.border = commonAttr.borderSize + unit + ' ' + commonAttr.borderStyle + ' ' + commonAttr.borderColor
      }
      return styles_
    },
  },
  mounted () {
    this.onRefreshCommonAttr()
  },
  methods: {
    onTouchMove(){
      this.touched = true;
    },
    onTouchEnd(){
      if(this.touched){
        EventBus.$emit("itemClick", {id: this.item.id, index: 0});
      }
      this.touched = false;
    },
    onRefreshCommonAttr() {
      this.convertCustomCss();
    },
    getCompDom() {
      return this.$refs.bg
    }
  },
  beforeUnmount(){
    this.item.vueContainer = null;
    if(this.isH5Edit) {
      EventBus.$off('refreshCommonAttr', this.onRefreshCommonAttr);
    }
  }
}
</script>
<style lang="scss">
.wb-bg {
  width: inherit;
  height: inherit;

  @keyframes mask{
    0% {-webkit-mask-position: 0px 0px;}
    25% {-webkit-mask-position: 619px 0px;}
    50% {-webkit-mask-position: 0px 0px;}
    75% {-webkit-mask-position: 308px 0px; -webkit-mask-size:100%;}
    100% {-webkit-mask-size: 1000%;}
  }

  .mask{
    width: inherit;
    height: inherit;
    animation: mask 5s linear infinite forwards;
  }
}
</style>